<template>
  <view class="user-info-container">
    <view class="info-form">
      <!-- 头像修改 -->
      <view class="avatar-section">
        <text class="section-title">头像</text>
        <view class="avatar-wrapper" >
		  <!-- #ifdef MP-WEIXIN -->
          <button class="avatar-wrapper-btn" open-type="chooseAvatar" @chooseavatar="handleChooseAvatar">
            <image 
              class="avatar" 
              :src="userInfo?.avatarUrl" 
              mode="aspectFill"
            ></image>
          </button>
		  <!-- #endif -->
		  
		  <!-- #ifdef H5 -->
		  <uni-file-picker
		    v-model="selectFile"
			return-type="object"
			fileType="image"
			:limit="1"
			:del-icon="false"
			:disable-preview="true"
			@select="chooseSelect"
		  ></uni-file-picker>
		
		  <!-- #endif -->
		  
        </view>
      </view>

      <!-- 昵称修改 -->
      <view class="nickname-section">
        <text class="section-title">昵称</text>
        <input 
          class="nickname-input"
          type="nickname"
          v-model="userInfo.nickName"
          placeholder="请输入昵称"
          maxlength="20"
        />
      </view>

      <!-- 保存按钮 -->
      <button class="save-btn" @click="handleSave">保存修改</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useUserStore } from '@/stores/user'
import request from '@/utils/request'
import { uploadFile } from '../../utils/request'


const userStore = useUserStore()
const userInfo = ref({
  avatarUrl: '',
  nickName: ''
})

const selectFile = ref({})

onMounted(() => {
  // 初始化用户信息
  if (userStore.userInfo) {
    userInfo.value = {
      avatarUrl: userStore.userInfo.avatarUrl || '',
      nickName: userStore.userInfo.nickName || ''
    }
	
	selectFile.value = {
		url: userStore.userInfo.avatarUrl || '',
		name: '头像'
	}
  }
})

// 保存修改
const handleSave = async () => {
  if (!userInfo.value.nickName) {
    uni.showToast({
      title: '请输入昵称',
      icon: 'none'
    })
    return
  }

  try {
    // 调用更新用户信息接口
    await userStore.updateUserInfo({
      avatarUrl: userInfo.value.avatarUrl,
      nickName: userInfo.value.nickName
    })

    uni.showToast({
      title: '保存成功',
      icon: 'success'
    })

    // 返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  } catch (error) {
    uni.showToast({
      title: error.message || '保存失败',
      icon: 'none'
    })
  }
}

const handleChooseAvatar = async(e) => {
  console.log('handleChooseAvatar e',e)
  const { avatarUrl } = e.detail

  try{
    let res = await uploadFile(avatarUrl)
    const { data:{url} } = res;
    userInfo.value.avatarUrl = url;
    uni.showToast({
      title: '上传成功',
      icon: 'none'
    })
  }catch(error){
    uni.showToast({
      title: '上传失败:' + error.message,
      icon: 'none'
    })
  }
  
}

const handleOpenSetting = () => {
  uni.openSetting({
    success: (res) => {
      console.log('res',res)
    }
  })
}

const progress =()=>{
	
}

const chooseSelect = (res) => {
  console.log('success',res)
  const { tempFiles } = res;
  const file = tempFiles[0];
  handleChooseAvatar({detail:{avatarUrl:file.url}})
}

const fail = (res) => {
  console.log('fail',res)
}

const select = (res) => {
  console.log('select',res)
}




</script>

<style lang="scss">
.user-info-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.info-form {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}

.avatar-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;

  .avatar-wrapper-btn{
    background-color: transparent;
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
  }
  
  .avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 80rpx;
  }
  
  .change-text {
    font-size: 24rpx;
    color: #007AFF;
  }
}

.nickname-section {
  margin-bottom: 40rpx;
}

.nickname-input {
  width: 100%;
  height: 80rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.save-btn {
  width: 100%;
  height: 88rpx;
  background-color: #007AFF;
  color: #fff;
  font-size: 32rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;
}
</style> 